import { categoryoneList } from "@/app/category";
import { getCateThree } from "@/app/categoryThree";
import { addCategoryTwo } from "@/app/categoryTwo";
import { useAppDispatch, useAppSelector } from "@/app/hooks";
import { Card, Select } from "antd";
import { useEffect, useState } from "react";


export default function AttrList() {
  const dispatch = useAppDispatch();
  const res = useAppSelector((state) => state);

  //定义二三级分类状态
  const [categorytwo,setCategorytwo] =useState(undefined)
const [categorythree,setcategorythree]=useState(undefined)
const [categoryone,setCategoryone]=useState(undefined)
// const [category1list,setCategory1List]=useState()
// const [category2list,setCategory2List]=useState()
// const [category3list,setCategory3List]=useState()

  // 组织一级分类的参数
  let newOptions = () => {
    return res.categoryone.value.map((item) => {
      return {
        value: item.id,
        label: item.name,
      };
    });
  };

  // 组织二级参数
  let twoList = () => {
    return res.twocate.value.map((item) => {
      return {
        value: item.id,
        label: item.name,
      };
    });
  };

  // 组织三级参数
  let threeList = () => {
    return res.threecate.value.map((item) => {
      return {
        value: item.id,
        label: item.name,
      };
    });
  };

  // 当一级变
  let handleChangeOne = async (value: string,type:any) => {
    // console.log(value);
setCategoryone(type.name)
    
setCategorytwo(undefined)
setcategorythree(undefined)
    dispatch(addCategoryTwo(value) as any);
    // value是id
  };

  // 当二级发生变化时候
  let handleChangeTwo = (value: string, type: any) => {
    console.log(type);
    setCategorytwo(type.label)
    setcategorythree(undefined)
    // 获取三级数据
    dispatch(getCateThree(value) as any);
  };

  // 三级变化时候
  const handleChange = (value: string, type: any) => {
setcategorythree(type.label)
  };

  useEffect(() => {
    dispatch(categoryoneList() as any);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [categoryone,categorytwo]);

  return (
    <Card className="left top">


            一级商品分类：
            <Select
              //  labelInValue
              placeholder="请选择一级分类"
              style={{ width: 200 }}
              onChange={handleChangeOne}
              options={newOptions()}
              value={categoryone}
            >
            </Select>

      二级商品分类：
     <Select
              // disabled={categoryone?false:true}
              placeholder="请选择三级分类"
              style={{ width: 200 }}
              onChange={handleChangeTwo}
              options={twoList()}
              value={categorytwo}
            >
            </Select>
         三级商品分类：
            <Select
            disabled={categorytwo?false:true}
              placeholder="请选择三级分类"
              style={{ width: 200 }}
              onChange={handleChange}
              options={threeList()}
              value={categorythree}
            >
            </Select>

    </Card>
  );
}
